<template>
    <view class="category">
        <view class="video">
            <video :src="videoPrefixL + 5994" autoplay loop muted playsinline :controls="false"></video>
        </view>
        <swiper :current="currentIndex" @change="swiperChange" style="height: 472rpx;">
            <swiper-item v-for="(item, index) in items" :key="index">
                <view class="cate">
                    <view class="item" v-for="(category, index1) in item" :key="category.sortId"
                        :class="{ 'pressed': isPressed[index1] }" @click="categoryClick(category.sortId)"
                        @touchstart="handleTouchStart(index1)" @touchend="handleTouchEnd(index1)">
                        <view class="itemImage">
                            <image :src="imgPrefixL + `${category.sortImgId}`" mode="aspectFill"></image>
                        </view>
                        <view class="itemTitle">
                            {{category.sortName}}
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    import {
        listCategoriesByTabId
    } from '@/api/category/index.js';
    export default {
        name: "category",
        data() {
            return {
                items: [],
                isPressed: [],
                currentIndex: 0,
                imgPrefixL: process.env.VUE_APP_IMG_BASE_URL,
                videoPrefixL: process.env.VUE_APP_VIDEO_BASE_URL
            };
        },
        methods: {
            getCategoryList() {
                listCategoriesByTabId({
                    sortId: this.tabCurrent
                }).then(res => {
                    this.items = res.data
                })
            },
            swiperChange(e) {
                this.currentIndex = e.detail.current;
            },
            categoryClick(sortId) {
                this.$store.commit('updateCategoryId', sortId);
                this.$store.commit('updateCategoryAndShopsReveals', false);
            },
            handleTouchStart(index1) {
                this.$set(this.isPressed, index1, true);
            },
            handleTouchEnd(index1) {
                this.$set(this.isPressed, index1, false);
            },
        },
        computed: {
            tabCurrent() {
                return this.$store.state.tabCurrent;
            }
        },
        watch: {
            tabCurrent: {
                immediate: true,
                handler(newValue) {
                    this.getCategoryList();
                }
            }
        },
    }
</script>

<style lang="scss">
    @import "uview-ui/index.scss";

    .category {
        flex: 1;
        width: 671rpx;
        height: 472rpx;

        .video {
            position: absolute;
            z-index: -1;
            width: 671rpx;
            overflow: hidden;
            height: 100%;
            top: 0;

            video {
                // width: 758.79rpx;
                width: 758.05rpx;
                height: 100%;
                object-fit: cover;
            }
        }



        .cate {
            margin: 35rpx auto;
            width: 586rpx;
            height: 396.985rpx;
            display: flex;
            flex-wrap: wrap;

            .item {
                width: 157.036rpx;
                height: 182.161rpx;
                margin-left: 19.3rpx;
                margin-right: 19.3rpx;
                margin-bottom: 32.035rpx;
                position: relative;

                .itemImage {
                    width: 157.036rpx;
                    height: 182.161rpx;

                    image {
                        width: 157.036rpx;
                        height: 182.161rpx;
                        border-radius: 10rpx;
                        box-shadow: 0 0 3rpx 1rpx #999;
                    }
                }

                .itemTitle {
                    width: 100%;
                    height: 21.985rpx;
                    line-height: 21.985rpx;
                    position: absolute;
                    bottom: 0rpx;
                    text-align: center;
                    font-size: 11.307rpx;
                    font-weight: 400;
                    color: #ffffff;
                    font-family: AlimamaDaoLiTiTTF;
                    background-color: rgba(237, 181, 166, 0.5);
                }
            }
        }
    }

    .pressed {
        transform: scale(0.9);
    }
</style>